/**
 * 导航选项卡
 */
class topTab {
    constructor(id) {
        this.tabRoot = $(id)
        this.liEle = this.tabRoot.find('div').find('ul').find('li')
    }
    onTab() {
        let _this = this
        _this.liEle.on('mouseover', function () {
            $(this).addClass('active').siblings().removeClass('active')
        })
    }
}
let toptab = new topTab('.tab')
toptab.onTab()

/**
 * 列表选项卡
 */
class listTab {
    constructor(id) {
        this.tabRoot = $(id)
        this.liEle = this.tabRoot.find('div').first().find('ul').find('li')//轮播左边的列表项
    }
    onListTab() {
        let _this = this
        _this.liEle.on('mouseover', function () {
            $(this).addClass('active2').siblings().removeClass('active2')
            $('.sidebar-panel').css('display', 'block')
        })
        _this.liEle.on('mouseout', function () {
            $(this).removeClass('active2')
            $('.sidebar-panel').css('display', 'none')
        })
    }
}

let listtab = new listTab('.sidebar')
listtab.onListTab()


function formterproductList(productList) {
    let len = 0
    if (productList.length % 4 != 0) {
        len = productList.length - (productList.length % 4)
    }
    let newList = productList.splice(0, len)
    return newList
}

/**
 * 加载商品列表数据
 */
function loadProductList() {
    $.ajax({
        type: 'get',
        // url: 'http://www.xiongmaoyouxuan.com/api/tab/1?start=0',
        url: 'http://www.xiongmaoyouxuan.com/api/tab/1/feeds?start=0',
        success: function (result) {
            console.log(result)
            if (result.code == 200) {
                let productList = result.data.list
                let newList = formterproductList(productList)
                showProductList(newList)
            }
        }
    })
    
}


/**
 * 显示商品列表界面
 */
function showProductList(lists) {
    let str = ''
    lists.forEach(list => {
        // 从一个页面跳转到另一个页面
        // <a href="http://ip:port/detailpage.html"></a>
        // onclick  ->  location.href = "http://ip:port/detailpage.html"
        str += `
        <li class="base-commodity-list-item" onclick="onDetailPage(${list.id})">
              <div class="commodity-card">
                  <div class="commodity-container">
                          <img src="${list.image}" alt="精选列表" class="commodity-card-img">
                  </div>
                  <div class="commodity-card-msg">
                          <div class="commodity-card-title">${list.title}</div>
                          <div class="commodity-card-keyword">
                              <span class="keyword tmall">${list.platform==1?'淘宝':'天猫'}</span>
                              <span class="keyword">${parseInt(list.couponValue)>=30 ? '大额券':''}</span>
                              <span class="keyword free-postage">${list.isFreePostage ==true ? '包邮':''}</span>
                          </div>
                          <div class="commodity-card-foot">
                              <div class="left">
                                  <span class="price">
                                      <span class="price-tag">￥</span>
                                      <span class="price-strong">${list.originPrice}</span>
                                      
                                  </span>
                                  <span class="sale-num">${list.saleNum}人已购买</span>
                              </div>
                              <span class="coupon-value">${list.couponValue}</span>
                          </div>
                  </div>
              </div>
       </li>
        `
    })
    let productStr = $('.base-commodity-list').html()

    $('.base-commodity-list').html(productStr + str)
    seeMore()
    // $('.base-commodity-list-more').html(str)
}



function onDetailPage(id) {
    location.href = './detailsPage.html?id=' + id
}


/**
 * 查看更多
 */
function seeMore() {
    const moreEle = document.querySelector('.choice-more-btn')
    $('.choice-more-btn').on('click',function () {
        loadMoreData()
        
        // $(this).css('display','none')
        // $(this).next().css('display','block')
    })
}

let pageNo = 0
/**
 * 获取更多数据
 */
function loadMoreData() {
    pageNo++
    $.ajax({
        url: 'http://www.xiongmaoyouxuan.com/api/tab/1/feeds',
        type: 'get',
        data: {
            start: pageNo * 20
        },
        success: function (result) {
            if (result.code == 200) {
                let list = result.data.list
                let newList = formterproductList(list)
                showProductList(newList)
                
            }
        }
    })
   
}


loadProductList()
seeMore()